<script lang='ts' setup name='App'>
import { ref,reactive, watch, watchEffect } from 'vue';

import type { User, Person} from '@/types/types'

let user = ref<User>({
  username:'admin',
  password:'123456',
  nickname:'管理员',
  avatrual:'http://asdasfasfdasfdasfdasfasfasfa.png',
  abc:''
})

// const userList = ref<Array<User>>([
//   {  username:'1admin', password:'123456',   nickname:'管理员',  avatrual:'http://asdasfasfdasfdasfdasfasfasfa.png' },
//   {  username:'2admin', password:'123456',   nickname:'管理员',  avatrual:'http://asdasfasfdasfdasfdasfasfasfa.png' },
//   {  username:'3admin', password:'123456',   nickname:'管理员',  avatrual:'http://asdasfasfdasfdasfdasfasfasfa.png' },
//   {  username:'4admin', password:'123456',   nickname:'管理员',  avatrual:'http://asdasfasfdasfdasfdasfasfasfa.png' },
//   {  username:'5admin', password:'123456',   nickname:'管理员',  avatrual:'http://asdasfasfdasfdasfdasfasfasfa.png',abc:'' }
// ])


const userList = ref<User[]>([
  {  username:'1admin', password:'123456',   nickname:'管理员',  avatrual:'http://asdasfasfdasfdasfdasfasfasfa.png' },
  {  username:'2admin', password:'123456',   nickname:'管理员',  avatrual:'http://asdasfasfdasfdasfdasfasfasfa.png' },
  {  username:'3admin', password:'123456',   nickname:'管理员',  avatrual:'http://asdasfasfdasfdasfdasfasfasfa.png' },
  {  username:'4admin', password:'123456',   nickname:'管理员',  avatrual:'http://asdasfasfdasfdasfdasfasfasfa.png' },
  {  username:'5admin', password:'123456',   nickname:'管理员',  avatrual:'http://asdasfasfdasfdasfdasfasfasfa.png',abc:'' }
])

const person = reactive<Person>({
      name: 'jshand',
      age: 18,
      address:'哈尔滨中兴大道109'
})



// const personList = reactive<Array<Person>>([
  const personList = reactive<Person[]>([
  {name: '1jshand',  age: 18,  address:'哈尔滨中兴大道109' },
  {name: '2jshand',  age: 28,  address:'哈尔滨中兴大道209' },
  {name: '3jshand',  age: 38,  address:'哈尔滨中兴大道309' },
  {name: '4jshand',  age: 48,  address:'哈尔滨中兴大道409' },
  {name: '5jshand',  age: 58,  address:'哈尔滨中兴大道509' },
])



  
</script>  
  
<template>  

    <div>
        <h3>用户信息</h3>
        <div>
          用户名:{{ user.username }}
        </div>

        <div>
          password:{{ user.password }}
        </div>
        <div>
          nickname:{{ user.nickname }}
        </div>
        <div>
          avatrual:{{ user.avatrual }}
        </div>
       
    </div>

    <hr>
    <h3>用列表</h3>
    
    <table border="1" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td>用户名</td>
        <td>密码</td>
        <td>昵称</td>
        <td>头像</td>
      </tr>
      
      
      <tr v-for="user in userList">
        <td>{{ user.username }}</td>
        <td>{{ user.password }}</td>
        <td>{{ user.nickname }}</td>
        <td>{{ user.avatrual }}</td>
      </tr>
    </table>

    <br><br>

    <div>person信息:{{ person.name }}  ,年龄:{{ person.age }}   ,地址:{{ person.address }}</div>
    <table border="1" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>地址</td>
      </tr>
      
      
      <tr v-for="person in personList">
        <td>{{ person.name }}</td>
        <td>{{ person.age }}</td>
        <td>{{ person.address }}</td>
      </tr>
    </table>
 





</template>




  
<style scoped> </style>  



